<template>
  <div>
    <el-date-picker
      v-model="value1"
      type="date"
      value-format="yyyy-MM-dd"
      :placeholder="startTimeTip"
      :picker-options="pickerOptionBefore"
      :default-value="dfTime"
      @change="BeforeChange"
      :disabled="value0 == '' || value0 == null"
    >
    </el-date-picker>
    <el-date-picker
      v-model="value2"
      type="date"
      value-format="yyyy-MM-dd"
      :placeholder="endTimeTip"
      :picker-options="pickerOptionAfter"
      :default-value="dfTime"
      @change="BeforeAfter"
      :disabled="value1 == '' || value1 == null"
    >
    </el-date-picker>
  </div>
</template>
<script>
export default {
  props: ["before", "start", "end", "last", "startTip", "endTip"],
  data() {
    return {
      dfTime:'',
      pickerOptionBefore: {
        disabledDate: (time) => {
          if (this.value2 == "" || this.value2 == null) {
            return time.getTime() <= new Date(this.value0);
          } else {
            return (
              time.getTime() < new Date(this.value0) ||
              time.getTime() >= new Date(this.value2) - this.date
            );
          }
        },
      },
      pickerOptionAfter: {
        disabledDate: (time) => {
          if (this.value3 == "" || this.value3 == null) {
            return time.getTime() <= new Date(this.value1);
          } else {
            return (
              time.getTime() < new Date(this.value1) ||
              time.getTime() >= new Date(this.value3) - this.date
            );
          }
        },
      },
      date: 24 * 60 * 60 * 1000,
      value0: this.before,
      value1: this.start,
      value2: this.end,
      value3: this.last,
      startTimeTip: "开始日期",
      endTimeTip: "结束日期",
    };
  },

  mounted() {
    this.Tip();
	console.log(this.value0)
  },
  methods: {
     addDateMonth(sourceDate,months) {
          var date = new Date(sourceDate);//比如sourceDate传参“2019-03-31”
          var oldDate = date.getDate();//获取原来的月有多少日
          date.setDate(1);//设置为1日（day）
          date.setMonth(date.getMonth() +months);//设置新的月份(从0开始)  months 传参-1
          var newDay= new Date(date.getYear(), date.getMonth()+1, 0).getDate();//获取新得到的月有多少日
          date.setDate(Math.min(oldDate, newDay));
          return date.toLocaleDateString()
      }
      ,
      isLastDayOfMonth(item) {
        var date = new Date(item);
        var flag = new Boolean(false);

        var year = date.getFullYear();
        var month = date.getMonth()+1;
        var today = date.getDate();

        var new_year = year; //取当前的年份
        var new_month = month++;//取下一个月的第一天，方便计算（最后一天不固定）
        if(month>12){//如果当前大于12月，则年份转到下一年
            new_month -=12; //月份减
            new_year++; //年份增
        }
        var new_date = new Date(new_year,new_month,1); //取当年当月中的第一天

        var month_last_day = (new Date(new_date.getTime()-1000*60*60*24)).getDate();

        if(today == month_last_day){
            flag = true;
        }
        return flag;
    },
    Tip() {
      if (this.startTip == null) {
        this.startTimeTip = "开始日期";
        this.endTimeTip = "结束日期";
      }else{
         this.startTimeTip = this.startTip;
        this.endTimeTip = this.endTip;
      }
    },
    BeforeChange() {
      this.$emit("update:start", this.value1);
    },
    BeforeAfter() {
      this.$emit("update:end", this.value2);
    },
  },
  watch: {
    before() {
      this.value0 = this.before;
    },
    start() {
      this.value1 = this.start;
    },
    end() {
      this.value2 = this.end;
    },
    last() {
      this.value3 = this.last;
    },
    value0() {
      this.dfTime=this.value0
      if(this.isLastDayOfMonth(this.value0)==true){
        console.log(this.addDateMonth(this.value0,1))
        this.dfTime=this.addDateMonth(this.value0,1)
      }
      if (this.value0 == "" || this.value0 == null) {
        this.value1 = "";
        this.value2 = "";
        this.$emit("update:start", this.value1);
        this.$emit("update:end", this.value2);
      }
    },
    value1() {
      this.dfTime=this.value1
      if(this.isLastDayOfMonth(this.value1)==true){
        this.dfTime=this.addDateMonth(this.value1,1)
      }
      if (this.value1 == "" || this.value1 == null) {
        this.value2 = "";
        this.$emit("update:end", this.value2);
      }
    },
    value2() {
      this.dfTime=this.value2
      if (this.value2 == "" || this.value2 == null) {
        this.value2 = "";
        this.$emit("update:end", this.value2);
      }
    },
  },
};
</script>
